<template>
  <MainLayout>
    <div class="pt-[80px] w-[calc(100%-90px)] max-w-[690px] relative">
      <div v-for="(post,index) in list" :key="`in-${index}`" :id="`post_${index}`">
        <PostSecondMain v-if="post" :post="post"
                        :v_key="index"/>
      </div>
      <div v-show="isShow"
           @click="backTop"
           class="fixed bottom-10 border border-gray-200 right-10 rounded-full flex justify-center items-center  bg-gray-100 text-center cursor-default w-[60px] h-[60px]">
        UP
      </div>
    </div>
  </MainLayout>
</template>

<script>
import MainLayout from '@/layouts/MainLayout.vue';

export default {
  components: {MainLayout},
  data() {
    return {
      list: [],
      isShow: false,
      isLoading: false,
      scrollTop: 0,
      offset: 0
    }
  },
  mounted() {
    this.scrollTop = document.body.scrollTop || document.documentElement.scrollTop
    this.bindScroll()
    try {
      this.$store.dispatch('general/getAllUsersAndPosts')
    } catch (error) {
      console.log(error)
    }
  },
  watch: {
    scrollTop: {
      handler(newVal) {
        this.isShow = newVal >= 600;
      }, immediate: true
    },
    '$route.query.keyword': {
      async handler() {
        await this.getList()
      }, immediate: true
    },
  },
  methods: {
    backTop() {
      window.scrollTo({
        top: 0,
        behavior: "smooth"
      });
    },
    scrollHande() {
      if (this.isLoading) return
      let scrollH = document.documentElement.scrollHeight
      let innerH = window.innerHeight
      let top = document.body.scrollTop || document.documentElement.scrollTop
      this.scrollTop = top
      if (scrollH - top - innerH < 200) {
        this.offset += 10
        this.getList(true);
      }
    },
    bindScroll() {
      window.addEventListener('scroll', this.scrollHande)
    },
    clearScroll() {
      window.removeEventListener('scroll', this.scrollHande)
    },
    async getList(flag) {
      try {
        this.isLoading = true;
        const res = await this.$axios({
          method: 'get',
          withCredentials: false,
          url: `http://127.0.0.1:4500/getSearch?keyword=${this.$route.query.keyword}&offset=${this.offset}`
        })
        this.isLoading = false
        let list = res.data.data.data || []
        if (flag) {
          if (list.length === 0) return;
          let arr = []
          for (let i = 0; i < list.length; i++) {
            if (list[i].aweme_info && list[i].aweme_info.video.bit_rate && list[i].aweme_info.video.bit_rate.length !== 0) {
              arr.push(list[i].aweme_info)
            }
          }
          this.list.push(...arr)
        } else {
          if (list.length === 0) return;
          let arr = []
          for (let i = 0; i < list.length; i++) {
            if (list[i].aweme_info && list[i].aweme_info.video.bit_rate && list[i].aweme_info.video.bit_rate.length !== 0) {
              arr.push(list[i].aweme_info)
            }
          }
          this.list = arr
        }
        this.$store.commit('post/setVideo', this.list)
      } catch (e) {

      }
    },
  },
  destroyed() {
    this.clearScroll()
  },
}
</script>
